import React,{Component} from "react";
import { Icon,  message, Button, BackTop, Modal} from 'antd';
import { withRouter} from "react-router-dom";
import moment  from "moment";
import ajax from "../ajaxMethod";
import "../assets/stylesheets/detail/article.css";

import Header from "../component/header.js";
import Footer from "../component/footer.js";


class ArticleDetail extends Component{
    constructor(props){
        super(props);
        this.state = {
            id:this.props.location.search?(()=>{
                let value = this.props.location.search.split("=");
                return value[1];
            })():"",
            data:{
                title:"",
                author:"",
                date:"",
                type:0,
            },
            ModalVisible:false,
            like:false,
            likeNumber:0,
        }
    }
    componentDidMount(){
        scrollTo(0,0);
        this.getData();
    }
    getData = () =>{
        console.log("发送获取数据的请求");
        let _this = this;
        ajax.getAjax("/interface/articleDetail",{id:this.state.id, username: localStorage.getItem("username")},res=>{
            if(res.success){
                _this.setState({data: res.data.data, like: res.data.like, likeNumber: res.data.data.like});
                _this.setContent(res.data.data.content);
            }else{
                console.error(res.description);
            }
        },err=>{
            console.error(err);
        } );
    }
    setContent = (content) =>{
        let contentbox = document.getElementById("content_views");
        contentbox.innerHTML = content;
    }
    handleOk = () =>{
        this.props.history.push({pathname:"/login"});
        this.setState({ModalVisible:false});
    }
    handleCancel = () =>{
        this.setState({ModalVisible:false});
    }
    likeClick = (e) =>{
        let _this = this;
        //喜欢，如果没登录提示登录，如果登录了向台请求，再改变状态。
        //后台要判断这个人是否已经点赞过。
        if(localStorage.getItem("username")){
            //如果是点过赞的就是取消，没点过就是加入
            if(this.state.like){//取消点赞
                ajax.postAjax("/interface/articleDislike",{id:this.state.id, username: localStorage.getItem("username")},res=>{
                    if(res.success){
                        _this.setState({like: false, likeNumber: this.state.likeNumber - 1});
                    }else{
                        console.error("取消点赞失败", res);
                    }
                },err=>{
                    console.error(err);
                })
            }else{//点赞
                ajax.postAjax("/interface/articleLike",{id:this.state.id, username: localStorage.getItem("username")},res=>{
                    if(res.success){
                        console.log("点赞完成", res.data);
                        _this.setState({like: true, likeNumber: this.state.likeNumber + 1});
                    }else{
                        console.log("点赞失败", res);
                    }
                },err=>{
                    console.error(err);
                })
            }
        }else{
            this.setState({ModalVisible:true});
        }
    }
    render(){
        let data = this.state.data;
        console.log("data-state", this.state);
        return(
        <div className="article-detail">
            <Header></Header>
            <div className="content-box">
                <div className="article-header-box">
                    <p className="article-header">{data.title}</p>
                    <div className="article-info-box">
                        <span className="date">{moment(data.date).format("YYYY-MM-DD")}</span>
                        <span className="author">{data.author}</span>
                        <span classNam="type">类型：{(()=>{
                            let type = "公告";
                            switch(data.type){
                                case 1: type = "机场";break;
                                case 2: type = "飞机";break;
                                case 3: type = "乘客";break;
                                default:;
                            }
                            return type;
                        })()}</span>
                    </div>
                </div>
                <div id="content_views"></div>
                <div className="btn-like-box">
                    <p>{this.state.likeNumber}</p>
                    {/* {this.state.like?<Icon type="heart" onClick={this.likeClick} />:<Icon type="star" onClick={this.likeClick} />} */}
                    {this.state.like?<i onClick={this.likeClick} className="icon-heart-o"></i>:<i onClick={this.likeClick} className="icon-heart"></i>}
                </div>
            </div>
            <Modal title="提示" 
                wrapClassName="vertical-center-modal"
                visible={this.state.ModalVisible} 
                onCancel={this.handleCancel}
                footer={[
                    <Button key="submit" type="primary" loading={this.state.loading} onClick={this.handleOk}>去登录</Button>,
                    <Button key="back" type="ghost" onClick={this.handleCancel}>取 消</Button>,
                ]}
            >
                <p>请登陆后再点赞</p>
            </Modal>
            <BackTop />
            <Footer></Footer>
        </div>)
    }
}

export default withRouter(ArticleDetail);